<div class="screenContainer">

    <div class="content">

        <div class="leftPanel">


            <div class="leftPanel-top posRE">
                <!-- 时间 -->
                <div class="timePanel ">
                    <div class="time">{{ today | date: 'HH:mm:ss'}} </div>
                    <div class="day">
                        <span>{{today | date: 'yyyy-MM-dd' }} </span>
                        <span>{{ today | formatDay }} </span>
                    </div>


                    <div class="aroungSide1"></div>
                    <div class="aroungSide2"></div>
                    <div class="aroungSide3"></div>
                    <div class="aroungSide4"></div>
                </div>

                <!-- 天气 -->
                <div class="weatherPanel posRE" *ngIf="weather">

                    <div class="topContent">
                        <div class="image">
                            <i nz-icon style="font-size: 60px">
                                <svg class="svg-icon" width="100" height="100" viewBox="0 0 200 200">
                                    <use xmlns:xlink="http://www.w3.org/2000/xlink"
                                        xlink:href="../../../assets/images/svg/ci.svg#yun" />
                                </svg>
                            </i>
                        </div>

                        <div class="content">
                            <div class="temp">
                                <span class="now">{{weather.tem}}℃</span>
                                <span class="text">{{weather.tem1}}℃/{{weather.tem2}}℃</span>
                                <span class="text">{{weather.wea}}</span>
                            </div>
                            <div class="city">
                                <span class="text">成都</span>
                                <span class="text">空气质量：{{weather.air_level}}</span>
                            </div>

                            <div class="aroungSide1"></div>
                            <div class="aroungSide2"></div>
                            <div class="aroungSide3"></div>
                            <div class="aroungSide4"></div>
                        </div>
                    </div>

                    <div class="bottomContent ">
                        <table class="tb">
                            <tr class="tr">
                                <td class="td">PM2.5 (μg/m³): <span class="text">{{weather.air_pm25}}</span></td>
                                <td class="td">风向 (方向)：<span class="text">{{weather.win}}</span></td>
                            </tr>
                            <tr class="tr">
                                <td class="td">风力 (级别)：<span class="text">{{weather.win_speed}}</span></td>
                                <td class="td">风速 (kmph)：<span class="text">{{weather.win_meter}}</span></td>
                            </tr>
                        </table>
                    </div>


                    <div class="aroungSide1"></div>
                    <div class="aroungSide2"></div>
                    <div class="aroungSide3"></div>
                    <div class="aroungSide4"></div>
                </div>
            </div>


            <div class="leftPanel-foot posRE">
                <!-- 在场人数 -->
                <div class="presentNum posRE">
                    <div class="content">
                        <div class="title">当前在场人数</div>
                        <div class="num" *ngIf="todayPeoples">{{todayPeoples.totalCount}}人</div>
                        <!-- <div class="num">117人</div> -->
                    </div>

                    <!-- <div class="aroungSide1"></div>
                    <div class="aroungSide2"></div>
                    <div class="aroungSide3"></div>
                    <div class="aroungSide4"></div> -->
                </div>


                <div echarts [options]="optionPie" style="height: 100%;width: 100%;" id='echartsPie'></div>


                <div class="aroungSide1"></div>
                <div class="aroungSide2"></div>
                <div class="aroungSide3"></div>
                <div class="aroungSide4"></div>
            </div>




        </div>


        <div class="middlePanel">

            <!-- 最近进场信息 -->
            <div class="resently-out-info posRE" style="margin-top: 0px">
                <div class="outcontent">
                    <div class="title">
                        <div class="text">最近进场人员信息</div>
                    </div>
                    <div class="list">
                        <p *ngFor="let item of ProjectUserForCheckIn">
                            <span class="name">{{item.name || '-'}}</span>
                            <span class="type">{{item.majorName || '-'}}</span>
                            <span class="intime"
                                style="width: 35%">{{ item.recordTime[0]?(item.recordTime[0] | dateTimePipe):'-'}}</span>
                            <span class="info" style="width: 11%">进场</span>
                            <span class="pos">{{item.pos || '门禁2'}}</span>
                        </p>
                    </div>
                </div>


                <div class="aroungSide1"></div>
                <div class="aroungSide2"></div>
                <div class="aroungSide3"></div>
                <div class="aroungSide4"></div>
            </div>

            <!-- 最近出场信息 -->
            <div class="resently-out-info posRE">
                <div class="outcontent">
                    <div class="title">
                        <div class="text">最近出场人员信息</div>
                        <!-- <div> weight: {{weight}} || height:{{height}} </div> -->
                    </div>
                    <div class="list">
                        <p *ngFor="let item of ProjectUserForCheckOut">
                            <span class="name">{{item.name || '-'}}</span>
                            <span class="type">{{item.majorName || '-'}}</span>
                            <span class="intime"
                                style="width: 35%">{{ item.recordTime[1]?(item.recordTime[1] | dateTimePipe):'-'}}</span>
                            <span class="info" style="width: 11%">出场</span>
                            <span class="pos">{{item.pos || '门禁2'}}</span>
                        </p>
                    </div>
                </div>


                <div class="aroungSide1"></div>
                <div class="aroungSide2"></div>
                <div class="aroungSide3"></div>
                <div class="aroungSide4"></div>
            </div>

        </div>


        <div class="rightPanel">

            <!-- 人员详情 -->
            <div class="peopleInfo posRE" *ngIf="lastManInfo">
                <div class="mainInfo">
                    <div class="avatar">
                        <img [src]=" lastManInfo.avatar ?'data:image/jpeg;base64,'+ lastManInfo.avatar :'../../../../../assets/images/project/header.png'"
                            [alt]="lastManInfo.name" [title]="lastManInfo.name">
                    </div>
                    <div class="detail">
                        <p>
                            姓名： <span>{{lastManInfo.name}}</span>
                        </p>
                        <p>
                            工种：<span>{{lastManInfo.majorName || '-'}}</span>
                        </p>
                        <p>
                            考勤方式： <span>{{ lastManInfo.recordTime[0]?'进场':lastManInfo.recordTime[1]?'出场':'-'}}</span>
                        </p>
                        <p>
                            时间：
                            <span>{{ lastManInfo.recordTime[0]?(lastManInfo.recordTime[0] | dateTimePipe):lastManInfo.recordTime[1]?(lastManInfo.recordTime[1] | dateTimePipe):'-'}}</span>
                        </p>
                    </div>
                </div>
                <div class="extraInfo">
                    <p>
                        单位： <span>中国电建建筑有限公司</span>
                    </p>
                    <p>
                        项目： <span>{{ project.name?project.name:'-'}}</span>
                    </p>
                </div>



                <div class="aroungSide1"></div>
                <div class="aroungSide2"></div>
                <div class="aroungSide3"></div>
                <div class="aroungSide4"></div>
            </div>

            <!-- 环境监测 -->
            <div class="enviroment posRE">
                <div class="enviromentCtn">

                    <div class="title">
                        <div class="text">环境监测</div>
                    </div>

                    <div class="temp-list">
                        <div class="bottomContent">
                            <div class="tb">
                                <div class="tr">
                                    <div class="td" style="margin-right: 36%">工地噪音 <span
                                            class="text">{{topList.b03Avg}}分贝</span></div>
                                    <div class="td">PM2.5 <span class="text">{{topList.pM25Avg}}μg/m³</span></div>
                                </div>
                                <div class="tr">
                                    <!-- <td class="td">PM10: <span class="text">{{topList.pm10}}</span></td> -->
                                    <div class="td" style="margin-right: 40%">当前温度 <span
                                            class="text">{{topList.t01Avg}}℃</span></div>
                                    <div class="td">相对湿度 <span class="text">{{topList.h01Avg}}%</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 温度湿度图表 -->
                    <div class="temp-humidity">
                        <div echarts [options]="temperatureOption" id="echartsTem"
                            style="height: 98%;width: 98%;margin-top: 3%;margin-left: 3px"></div>
                    </div>
                </div>





                <div class="aroungSide1"></div>
                <div class="aroungSide2"></div>
                <div class="aroungSide3" style="left: -6px;bottom: 7px"></div>
                <div class="aroungSide4"></div>
            </div>
        </div>

    </div>


</div>
<div [title]="status==0?'LED服务状态：正常':status==1?'LED服务状态：警告':'LED服务状态：异常'" class="LED"
    [ngStyle]="{'background-color': status==0?'#98e672':status==1?'orange':'red'}"></div>
<div [title]="LEDswitchStatus==0?'LED状态：关闭':LEDswitchStatus==1?'LED状态：开启':'LED状态：异常'" class="LED_s"
    [ngStyle]="{'background-color': LEDswitchStatus==0?'red':LEDswitchStatus==1?'#98e672':'red'}"></div>